<style lang="less">
</style>
<template>
  <div class="search">
    <Row>
      <Col>
      <Card>
        <Row>
          <Form ref="searchForm"
                :model="searchForm"
                inline
                :label-width="70"
                class="search-form">
            <Form-item label="路线名称">
              <Input type="text"
                     v-model="searchForm.polylineName"
                     :clearable="true"
                     placeholder="请输入路线名称"
                     style="width: 200px" />
            </Form-item>
            <Form-item label="车牌号">
              <Input type="text"
                     v-model="searchForm.licnum"
                     :clearable="true"
                     placeholder="请输入车牌号"
                     style="width: 200px" />
            </Form-item>
            <Form-item style="margin-left:-35px;"
                       class="br">
              <Button @click="handleSearch"
                      type="primary"
                      icon="ios-search">搜索</Button>
              <Button @click="handleReset">重置</Button>
            </Form-item>
          </Form>
        </Row>
        <Row class="operation">
          <Button @click="unBind"
                  type="primary"
                  icon="md-cut"
                  v-has="'unbind'">解锁绑定</Button>
          <circleLoading v-if="operationLoading" />
        </Row>
        <Row>
          <Alert show-icon>
            已选择
            <span class="select-count">{{selectCount}}</span> 项
            <a class="select-clear"
               @click="clearSelectAll">清空</a>
          </Alert>
        </Row>
        <Row>
          <Table :loading="loading"
                 max-height="520"
                 border
                 :columns="columns"
                 :data="data"
                 sortable="custom"
                 @on-sort-change="changeSort"
                 @on-selection-change="showSelect"
                 ref="table"></Table>
        </Row>
        <Row type="flex"
             justify="end"
             class="page">
          <Page :current="searchForm.current"
                :total="total"
                :page-size="searchForm.size"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10,20,50,100]"
                size="small"
                show-total
                show-elevator
                show-sizer></Page>
        </Row>
      </Card>
      </Col>
    </Row>
  </div>

</template>

<script>
import { getCarPolylinePageList, unbindPolyline } from '@/api/operate'
import circleLoading from '../../my-components/circle-loading.vue'
import { plateColorSelect } from '@/libs/dict'
export default {
  name: 'polyline-manage',
  components: {
    circleLoading
  },
  data() {
    return {
      plateColorSelect: plateColorSelect,
      loading: true,
      operationLoading: false,
      selectCount: 0,
      selectList: [],
      searchForm: {
        licnum: '',
        polylineName: '',
        current: 1,
        size: 20
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '序号',
          type: 'index',
          width: 65,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '路线名称',
          key: 'polylineName',
          minWidth: 150
        },
        {
          title: '车牌号',
          key: 'licnum',
          width: 120
        },
        {
          title: '车牌颜色',
          key: 'plateColor',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              this.plateColorSelect.find(item => {
                return item.value == params.row.plateColor
              }).label
            )
          }
        },
        {
          title: '运输企业名称',
          key: 'companyName',
          minWidth: 200
        },
        {
          title: '运营商',
          key: 'operatorName',
          minWidth: 200
        }
      ],
      data: [],
      total: 0
    }
  },
  methods: {
    init() {
      this.getCarPolylineList()
    },
    changePage(v) {
      this.searchForm.current = v
      this.getCarPolylineList()
      this.clearSelectAll()
    },
    changePageSize(v) {
      this.searchForm.size = v
      this.getCarPolylineList()
    },
    getCarPolylineList() {
      // 多条件搜索
      this.loading = true
      getCarPolylinePageList(this.searchForm).then(res => {
        this.loading = false
        if (res.code == 0) {
          this.data = res.data.records
          this.total = res.data.total
        }
      })
    },
    handleSearch() {
      this.searchForm.current = 1
      this.searchForm.size = 20
      this.getCarPolylineList()
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.polylineName = ''
      this.searchForm.licnum = ''
      this.searchForm.current = 1
      this.searchForm.size = 20
      // 重新加载数据
      this.getCarPolylineList()
    },
    showSelect(e) {
      this.selectList = e
      this.selectCount = e.length
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false)
    },
    unBind() {
      console.log(this.selectList)
      if (this.selectCount == 0) {
        this.$Message.warning('请先勾选解绑列')
        return
      }
      let carPolylineList = this.selectList.map(item => {
        return {
          carPolylineId: item.carPolylineId,
          polylineId: item.polylineId,
          polylineType: item.polylineType,
          carId: item.carId
        }
      })
      this.$Modal.confirm({
        title: '确认解除绑定',
        content: '您确认要解除已勾选的绑定路线 ?',
        loading: true,
        onOk: () => {
          unbindPolyline({ carList: carPolylineList }).then(res => {
            if (res.code == 0) {
              this.$Message.success('解绑成功')
              this.$Modal.remove()
              this.getCarPolylineList()
            } else {
              this.$Message.error(res.msg)
            }
          })
        }
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>